<template>
  <div class="page_root">
    <var-scene flex class="search_row">
      <var-scene w="200" pr="10">
        <var-input
          v-model="filter.keywords"
          clearable
          placeholder="关键字搜索"
          @input="keywordsChange"
        ></var-input>
      </var-scene>
      <router-link :to="{ path: '/blog' }">
        <var-button primary> 新建文章 </var-button>
      </router-link>
    </var-scene>
    <div class="table_row">
      <var-table :data="mainList" :columns="columns" center>
        <template #name="{ row }">
          <var-scene flex middle class="title_col">
            <router-link :to="{ path: `/blog/${row.hash}` }">
              <var-scene pl="10" class="blog_title">{{ row.name }}</var-scene>
            </router-link>
            <div v-if="row.status == 0" class="label">未发布</div>
          </var-scene>
        </template>
        <template #edit="scope">
          <var-scene flex center class="control_row">
            <router-link :to="{ path: `/blog/${scope.row.hash}` }">
              <var-link primary> 编辑 </var-link>
            </router-link>
            <var-link
              v-if="scope.row.status == 1"
              text
              primary
              @click="hideRow(scope.row)"
            >
              隐藏
            </var-link>
            <var-link
              v-if="scope.row.status == 0"
              text
              primary
              @click="showRow(scope.row)"
            >
              显示
            </var-link>
          </var-scene>
        </template>
      </var-table>
    </div>
    <div class="pagination">
      <var-pager
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="filter.pageSize"
        :page-no="filter.pageNo"
        :total="total"
        @pageNoChanged="pageNoChange"
      >
      </var-pager>
    </div>
  </div>
</template>
<script>
import * as http from "./api";
import { throttle, formatDate } from "@/utils";
export default {
  name: "BlogList",
  data() {
    return {
      mainList: [],
      columns: [
        {
          prop: "id",
          label: "ID",
        },
        {
          prop: "name",
          label: "标题",
        },
        {
          prop: "createdAt",
          label: "创建时间",
        },
        {
          prop: "updatedAt",
          label: "修改时间",
        },
        {
          prop: "edit",
          label: "操作",
        },
      ],
      total: 0,
      row: {},
      filter: {
        keywords: "",
        pageSize: Math.floor((window.innerHeight - 160) / 47),
        pageNo: 1,
      },
    };
  },
  mounted() {
    console.log("mounted");
    this.getMainList();
  },
  methods: {
    keywordsChange: throttle(function () {
      this.filter.pageNo = 1;
      this.getMainList();
    }, 1000),
    pageSizeChange(v = 10) {
      this.total = 0;
      this.filter.pageSize = v;
      this.filter.pageNo = 1;
      this.getMainList();
    },
    pageNoChange(v) {
      this.filter.pageNo = v;
      this.getMainList();
    },
    resetFilter() {
      this.filter = {
        keywords: "",
        label_id: "",
        folder_id: "",
        pageSize: 10,
        pageNo: 1,
      };
    },
    async getMainList() {
      try {
        const res = await http.selectBlogsList(this.filter);
        this.mainList = res.data.list.map((item) => {
          return {
            ...item,
            createdAt: formatDate(item.created_at),
            updatedAt: formatDate(item.updated_at),
          };
        });
        this.total = res.data.total;
      } catch (e) {
        console.log("getMainList Error", e);
        this.$message.error(e.msg || "网络异常");
      }
    },
    handleClick(row) {
      console.log(row);
    },
    addRow() {
      this.$router.push({
        path: "/newblog",
      });
    },
    previewRow(row) {
      this.$router.push({
        path: `/newblog/${row.hash}`,
      });
    },
    editRow(row) {
      // this.row = { ...row };
      this.$router.push({
        path: `/blog/${row.hash}`,
      });
    },
    async hideRow(row) {
      try {
        await http.toggleStatus({
          ...row,
          status: 0,
          title: row.name,
        });
        await this.getMainList();
      } catch (e) {
        console.log(e);
        this.$message.error(e.msg || "修改失败，请稍后重试");
      }
    },
    async showRow(row) {
      try {
        await http.toggleStatus({
          ...row,
          status: 1,
          title: row.name,
        });
        await this.getMainList();
      } catch (e) {
        console.log(e);
        this.$message.error(e.msg || "修改失败，请稍后重试");
      }
    },
    async deleteRow(row) {
      try {
        const res = await http.dropBlog(row);
        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        }
        this.getMainList();
      } catch (e) {
        console.log(e);
        this.$message.error("删除失败，请稍后重试");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page_root {
  .search_row {
    background: url("./images/page_bg.png");
    position: sticky;
    top: 0;
    z-index: 10;
    // padding: 10px 0;
    padding: 10px 0;
  }
  .table_row {
    background-color: white;
  }
  .title_col {
    .label {
      margin-left: 10px;
      background-color: rgb(243, 87, 87);
      padding: 0 6px;
      color: white;
    }
  }
  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: center;
  }
  .folder_name {
    margin-right: 10px;
  }
  .control_row {
    display: flex;
  }
}
</style>
